<template>
    <view>
        <z-paging
            ref="paging"
            v-model="dataList"
            :refresher-out-rate="0.8"
            auto-scroll-to-top-when-reload
            safe-area-inset-bottom
            bg-color="#fff"
            @query="queryList"
            :auto-clean-list-when-reload="false"
            :auto-scroll-to-top-when-reload="false"
            empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
            empty-view-text="暂无内容"
            :refresher-status.sync="refresherStatus"
        >
            <view class="top flex_wrap flex_column row_center-column_center">
                <view class="pepole" @click="goPage">
                    <view class="flex_wrap row_right row_middle">
                        <view
                            ><u--text
                                text="总人数"
                                color="#FFF"
                                size="24rpx"
                                margin=" 0 8rpx"
                        /></view>
                        <view
                            ><u--text :text="total" color="#FFF" size="40rpx"
                        /></view>
                    </view>
                    <view class="flex_wrap row_middle bottom">
                        <view class="flex_wrap flex_column">
                            <view
                                ><u--text
                                    text="本周新增用户"
                                    color="#FFF"
                                    size="28rpx"
                                    margin=" 0 80rpx 0 0"
                            /></view>
                            <view class="flex_wrap">
                                <text class="prope_t">{{
                                    newCustomerNumList.newCustomersThisWeek
                                }}</text>
                                <text class="prope_tt">人</text>
                            </view>
                        </view>
                        <view class="flex_wrap flex_column">
                            <view
                                ><u--text
                                    text="本月新增用户"
                                    color="#FFF"
                                    size="28rpx"
                            /></view>
                            <view class="flex_wrap">
                                <!-- <u--text
						            :text="total"
						            color="#FFF"
						            size="64rpx"
						            bold
								/> -->
                                <text class="prope_t">{{
                                    newCustomerNumList.newCustomersThisMonth
                                }}</text>
                                <text class="prope_tt">人</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="search">
                    <u-search
                        placeholder="请输入关键字"
                        v-model="keyword"
                        bgColor="#E1E1E1"
                        color="#333"
                        placeholderColor="#999999"
                        disabled
                        height="64rpx"
                        @click="toSearchList"
                        :actionStyle="actionStyle"
                    />
                </view>
                <!-- 升降序筛选 -->
                <view style="width: 100%">
                    <view class="flex_wrap">
                        <view
                            v-for="(item, index) in screenList"
                            :key="index"
                            class="tab flex_wrap row_middle"
                        >
                            <view
                                :class="currentIndex === index ? 'up' : 'down'"
                                @click="toggleclass(index, item)"
                                >{{ item.name }}</view
                            >
                            <u-icon
                                :name="
                                    currentIndex === index
                                        ? '/static/images/up.png'
                                        : '/static/images/upDown.png'
                                "
                                size="24rpx"
                            />
                            <!-- <u-icon
								name=""
								:name="item.status===1?'/static/images/up.png':'/static/images/down.png'"
								size="24rpx"
							/> -->
                            <!-- <view class="">
								<u-icon
									name="arrow-up-fill"
									:color="item.status===1?'#588BF3 ':'#777777'"
																		size="16rpx"
								/>
								<u-icon
									name="arrow-down-fill"
									:color="item.status===2 ? '#588BF3 ':'#777777'"
									size="16rpx"
								/>
							</view> -->
                        </view>
                    </view>
                </view>
            </view>
            <view class="scrollViews">
                <view>
					<view class="flex_wrap fileBox"><u-icon label="添加客户" size="28rpx" name="plus" color="#777" labelColor="#777" @click="show1 = true"></u-icon></view>
                    <view
                        class="item flex_wrap flex_column"
                        v-for="(item, index) in dataList"
                        :key="index"
                    >
						 <u-swipe-action>
						    <u-swipe-action-item :options="options1" @click="delGoods(item)">
								<view @click="goDetails(item)">
									<view class="topMessage flex_wrap row_between">
										<view class="flex_wrap row_middle flex-wrap">
											<u-image
												:src="item.avatar || MissingAvatar"
												width="100rpx"
												height="100rpx"
												bgColor="#eee"
												shape="circle"
											/>
											<view class="flex_wrap flex_column">
												<view style="margin-left: 20rpx">
													<view class="flex_wrap">
														<u-text
															:text="
																item.latestSignInNotes ||
																item.nickName ||
																'微信用户'
															"
															color="#333"
															bold
															size="40rpx"
														/>
													</view>
													<u-gap height="10rpx" />
													<u-text
														color="#666"
														:text="
															item.customerPhone || '--'
														"
													/>
												</view>
											</view>
											<view
												class="u-page__tag-item"
												v-for="(v, i) in item.tag"
												:key="i"
											>
												<u-tag
													:text="`${v}`"
													:name="v"
													borderColor="#588BF3"
													color="#588BF3"
													plain
												>
												</u-tag>
											</view>
										</view>
										<view
											style="margin-top: 20rpx; text-align: right"
										>
											<u-icon
												name="arrow-right"
												color="#333"
												size="14"
												top="20rpx"
												bold
											/>
										</view>
									</view>
									<u-gap height="2rpx" bgColor="#F3F3F3" />
									<view class="time">
										<u-text
											color="#666"
											:text="
												`时间：` +
												(item.correlationTime || '--')
											"
										/>
										<view>
											<u-rate
												:value="item.customerStar"
												activeColor="#FFAA00"
												readonly
												:size="16"
											></u-rate>
										</view>
									</view>
									<view class="time">
										<u-text
											color="#666"
											:text="
												`来源：` +
												(item.associatedChannelDesc || '--')
											"
										/>
									</view>
								</view>
							</u-swipe-action-item>
						</u-swipe-action>
                    </view>
                </view>
            </view>
			<u-modal
			    :show="show1"
			    ref="editModal"
			    title="添加客户"
			    showCancelButton
			    @confirm="confirmEdit1"
			    @cancel="cancelEdit1"
			    confirmText="确定"
			    confirmColor="#1682FF"
			    cancelText="上一步"
			>
			    <view slot="default" style="width: 100%">
					<u--text
					    text="客户姓名"
					    size="32rpx"
					    color="#3D3D3D"
					    lineHeight="80rpx"
					></u--text>
					<u--input
					    v-model="userName"
					     placeholder="请输入客户姓名"
					    :customStyle="{
					        background: '#F7F7F7',
					        borderRadius: '16rpx 16rpx 16rpx 16rpx',
					        border: 'none',
					        height: '80rpx',
					    }"
					    :placeholderStyle="{
					        fontSize: '28rpx',
					        color: '#F7F7F7',
					    }"
					></u--input>
					
					<u--text
					    text="客户手机号"
					    size="32rpx"
					    color="#3D3D3D"
					    lineHeight="80rpx"
					></u--text>
					<u--input
					    type="number"
					    placeholder="请输入客户手机号"
					    :maxlength="11"
					    clearable
					    v-model="userPhone"
					    :customStyle="{
					        background: '#F7F7F7',
					        borderRadius: '16rpx 16rpx 16rpx 16rpx',
					        border: 'none',
					        height: '80rpx',
					    }"
					    :placeholderStyle="{
					        fontSize: '28rpx',
					        color: '#F7F7F7',
					    }"
					></u--input>
			    </view>
			</u-modal>
        </z-paging>
    </view>
</template>

<script>
import {
    pageCustomerManageBySalesmanId,
    newCustomerNum,
	removeCustomer
} from "@/api/userManageSalesman.js";
import { userIdByPhone,createSalesmanCustomerManage} from "@/api/enterprise.js"
export default {
    data() {
        return {
			status: {
				0: "扫码业务员资讯",
				1: "扫码业务视频",
				2: "扫码业务商品",
				3: "扫码业务员",
				4: "激活权益卡",
				5: "签到",
				6: "领取",
				7: "管理员查看",
				8: "激活电子权益卡",
				9: "其他",
				10: "客户下单活动商品关注该活动商品指定的业务员",
				11: "客户下单商品关注业务员",
				12: "客户购买关注业务员",
			},
            sortField: "1", //时间排序 1 星级排序 2
            currentIndex: 0,
            screenList: [
                {
                    name: "时间排序",
                    status: 0,
                    sortField: "1",
                },
                {
                    name: "星级排序",
                    status: 0,
                    sortField: "2",
                },
                {
                    name: "字母排序",
                    status: 0,
                    sortField: "3",
                },
            ],
            MissingAvatar: "/static/img/conference/MissingAvatar.png",
            salesmanId: "",
            orderNum: "",
            total: 0,
            keyword: "",
            dataList: [],
            newCustomerNumList: {},
			show1:false,
			userName:'',
			userPhone:'',
			options1: [{
				text: '删除'
			}],
        };
    },
    onLoad() {
        this.getNewUserList();
    },
    onShow() {
        this.$refs.paging.reload();
    },
    methods: {
		delGoods(item) {
			this.id = item.customerId
			const that = this;
			uni.showModal({
				title: "",
				content: "确定要删除该客户吗？",
				success({
					confirm,
					cancel
				}) {
					if (confirm) {
						removeCustomer(that.id).then((res) => {
							uni.$u.toast("删除成功！");
							uni.$u.sleep(500).then(() => {
								that.$refs.paging.reload();
							});
						});
					}
				},
			});
		},
		cancelEdit1() {
		    this.show1 = false;
		    this.userPhone = "";
		    this.userName = "";
		},
		async confirmEdit1() {
			if (!this.userName.length)
				return uni.showToast({
					title: "请填写客户姓名",
					icon: "none",
				});
			if (!this.userPhone.length || !/^1[3456789]\d{9}$/.test(this.userPhone))
				return uni.showToast({
					title: "请确认客户手机号",
					icon: "none",
				});
			
				
			const params = {
				customerPhone:this.userPhone,
				customerName:this.userName,
				associatedChannel:14
			}
			createSalesmanCustomerManage(params).then((res) => {
			    uni.$u.toast('添加成功');
				this.cancelEdit1();
				this.$refs.paging.reload();
			});
		},
		
        async toggleclass(index, item) {
            this.currentIndex = index;
            this.sortField = item.sortField;
            await this.$refs.paging.reload();
        },
        goPage() {
            uni.navigateTo({
                url: "/pages_operate/userdata/index",
            });
        },

        toSearchList() {
            uni.$u.route({
                url: "pages_my/user_manage/userList/indexSearch",
            });
        },
        async queryList(pageNo, pageSize) {
            const params = {
                pageNum: pageNo,
                pageSize: pageSize,
                orderType: "2", //正序 1倒序 2
                sortField: this.sortField, //时间排序 1 星级排序 2
            };
            if (this.keyword) params.query = this.keyword;
            const result = await pageCustomerManageBySalesmanId(params);
            if (result.data.rows) {
                result.data.rows.map((v) => {
                    if (v.tag) {
                        v.tag = v.tag.split(",").map((v) => v);
                    } else {
                        v.tag = [];
                    }
                });
            }
            console.log(333, result.data.rows);
            this.$refs.paging.complete(result.data.rows);
            this.total = result.data.total;
        },
        getNewUserList() {
            let salesmanId = this.$store.getters?.userInfo.id;
            newCustomerNum(salesmanId).then((res) => {
                this.newCustomerNumList = res.data;
            });
        },

        keywordSearch() {
            this.$refs.paging.reload();
        },
        starChange(e, item) {
            // this.customerStar = e;
        },
        goDetails(e) {
            const data = JSON.stringify(e);
            this.$u.route({
                url: "/pages_my/user_manage/userDetails/index",
                params: {
                    data,
                },
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.signList {
   ::v-deep.u-line {
        height: auto !important;
    }

    position: relative;
}

.u-text.data-v-50004b49 {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    flex: 0 !important;
    width: 100%;
}

.pepole {
    padding: 20rpx 20rpx 0 80rpx;
    width: 694rpx;
    height: 276rpx;
    box-sizing: border-box;
    background: linear-gradient(270deg, #4467d2 0%, #6e8de7 100%);
    background-image: url("@/static/img/conference/usermangebg.png");
    border-radius: 24rpx;
    background-size: cover;
}

.bottom {
    margin-top: 60rpx;
}

.prope_t {
    display: block;
    font-size: 56rpx;
    color: #fff;
}

.prope_tt {
    display: block;
    font-size: 28rpx;
    color: #fff;
    margin: 26rpx 0 0 8rpx;
}

.top {
    background-size: cover;
    background-position-y: bottom;
    padding-top: 30rpx;
}

.search {
    padding: 30rpx 20rpx 24rpx 20rpx;
    background-color: #fff;
    width: 96%;
}

.scrollViews {
    width: 100%;
    padding: 30upx 28upx 0 28upx;
    box-sizing: border-box;
    background: #f7f7f7;
    margin-top: 10rpx;

    .item {
        width: 100%;
        height: auto;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        margin-bottom: 40upx;
        background-color: #fff;

        .topMessage {
            padding: 30upx 20rpx;
            // border-bottom: 1px solid #dddadf;
            text-align: center;
            position: relative;
        }

        .statusBg {
            width: 121rpx;
            height: 40rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #ffffff;
            line-height: 40rpx;
            text-align: center;
            background-size: contain;
        }

        .bottomMessage {
            padding: 20upx;
            box-sizing: border-box;
            background-color: rgba(245, 246, 250, 0.6);
        }

        .timeBox {
            margin-left: 100rpx;
        }
    }
}

/* 其他顾问 */
.else_enterprise {
    // padding: 20rpx 20rpx;

    margin-top: 12rpx;
    padding: 32rpx;
    background: linear-gradient(
        135deg,
        #deebf9 0%,
        rgba(255, 255, 255, 0) 100%
    );

    .list1,
    .list2 {
        width: 134rpx;
        height: 48rpx;
        color: #fff;
        text-align: center;
        line-height: 48rpx;
        background: linear-gradient(90deg, #74adff 0%, #4992fa 100%);
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        font-size: 28rpx;
        margin-right: 20rpx;
    }

    .list2 {
        background: linear-gradient(90deg, #58eaf7 0%, #48c4cf 100%);
    }
}

.el_adviser_info_info {
    display: flex;
    align-items: center;
}

.el_adviser_info_img {
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
    margin: 0 20rpx;
}

button::after {
    border: none;
    border-radius: 0;
}

.adviser_info,
.adviser_else {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    color: #333;
    justify-content: space-between;
}

.adviser_info_img {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    margin-right: 16rpx;
}
.tab {
    // padding: 0 90rpx 18rpx;
    flex: 1;
    display: flex;
    justify-content: center;
}
.up {
    font-size: 28rpx;
    color: #588bf3;
    margin-right: 10rpx;
}
.down {
    font-size: 28rpx;
    color: #777777;
    margin-right: 10rpx;
}
.time {
    padding: 18rpx 36rpx;
    display: flex;
}
.u-page__tag-item {
    margin-left: 10rpx;
    margin-top: 20rpx;
}
.fileBox {
		justify-content: flex-end;
		padding-bottom: 30rpx;
	}
</style>
